<template>
  <div>
    <div>计算属性-案例</div>
    <hr>
    <input @click='isAll=!isAll' type="checkbox" :checked='isAll'>全选
    <ul>
      <li v-for='item in myList' :key='item.id'>
        <!-- <input @click='myList=item' type="checkbox" :checked='item.status'> -->
        <input @click='item.status=!item.status' type="checkbox" :checked='item.status'>
        <span>{{item.title}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import { computed, ref } from '@vue/runtime-core'

export default {
  name: 'App',
  setup () {
    // todos
    const list = ref([{
      id: 1,
      title: '写代码',
      status: true
    }, {
      id: 2,
      title: '吃饭',
      status: false
    }, {
      id: 3,
      title: '睡觉',
      status: false
    }, {
      id: 4,
      title: '打豆豆',
      status: false
    }])

    const myList = computed({
      // 把打豆豆这项数据去除
      get () {
        return list.value.filter(item => {
          return item.title !== '打豆豆'
        })
      },
      // 修改点击的条目的数据状态
      set (info) {
        const obj = list.value.find(item => item.id === info.id)
        if (obj) {
          obj.status = !obj.status
        }
      }
    })

    // 控制全选按钮的状态
    const isAll = computed({
      get () {
        return myList.value.every(item => item.status)
      },
      set (status) {
        // 控制所有的列表状态全部改变
        myList.value.forEach(item => {
          item.status = status
        })
      }
    })

    return { myList, isAll }
  }
}
</script>
